<template>
	<view class="content">
		<view style="width: 100%;display: flex;flex-direction: column;align-items: center;">
			<image src="/static/images/logo.png" style="width: 120rpx;margin-top: 250rpx;border-radius: 16rpx;" mode="widthFix"></image>
			<view style="margin: 30rpx auto;font-size: 45rpx;font-weight: 500;">
				用户登录
			</view>
			
			<view style="padding: 60rpx;margin-top: 50rpx;">
				<view style="border: 1rpx solid #e5e5e5;border-radius: 12rpx;">
					<u-field v-model="phone" placeholder-style="color:#d1d1d1;" icon="account" :border-bottom="false" label-width="0" placeholder="请填写手机号" :clearable="false">
					</u-field>
				</view>
				<view style="border: 1rpx solid #e5e5e5;border-radius: 12rpx;margin-top: 20rpx;">
					<u-field v-model="password" placeholder-style="color:#d1d1d1;" :border-bottom="false" type="password" icon="lock" label-width="0" placeholder="请填写密码" :clearable="false">
					</u-field>
				</view>
			
				<view style="margin-top: 80rpx;">
					<u-button hover-class="none" type="primary" @click="login" shape="circle" style="height: 90rpx;background: linear-gradient(to right,#6490f3,#2c72f3);width: 90%;color: white;">登 录</u-button>
				</view>
			</view>
		</view>
		
		<view style="margin-bottom: 50rpx;display: flex;align-items: baseline; color: #686868;">
			<view class="">
				忘记密码
			</view> 
			<view style="margin-left: 10rpx;margin-right: 10rpx;">
				|
			</view>
			<view @click="goRegister" class="">
				注册账号
			</view>
		</view>
	</view>
</template>
<script>
	import util from '../../utils/index.js'
	import auth from '../../utils/auth.js'
	import {
		pub
	} from '../../common/event.js'
	export default {
		data() {
			return {
				phone: '',
				password: ''
			}
		},
		methods: {
			login: async function() {
				if(!this.phone || !this.password){
					uni.showToast({
						title:"填写用户名密码",
						icon:"none"
					})
					return
				}
				const ret = await this.$u.post(`/login/login/user`, {
					phone: this.phone,
					password: this.password
				})
				if (ret.success) {
					auth.saveUser(ret.data.user)
					auth.setAuthorization(ret.data.token)
					auth.setRefreshAuthorization(ret.data.refreshToken)
					pub(`loginSuccess`, ret.data.user)
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else {
					uni.showToast({
						title: ret.message ?? "error",
						icon: "none"
					})
				}
			},
			goRegister: function() {
				uni.redirectTo({
					url: "/pages/login/register"
				})
			}
		},
		onUnload() {
			this.$store.commit(`common/setLoginStatus`,false)
		},
		onLoad() {
			this.$store.commit(`common/setLoginStatus`,true)
			const user = uni.getStorageSync("user")
			const token = uni.getStorageSync("token")
			const refreshToken = uni.getStorageSync("refreshToken")
			if(user && token && refreshToken){
				uni.switchTab({
					url:"/pages/index/index" 
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100vh;
		justify-content: space-between;
	}

	.my-placeholder {
		color: red;
	}

	.inputView {
		height: 100rpx;
		background: #f1f1f1;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
	}
</style>